<template>
  <div style="width: 100%; height: 100%">
    <div style="width: 100%; height: 150px">
      <img src="../assets/img/未标题-1.png" style="height: 50%; margin-left: 20%; margin-top: 2%" alt="" />
    </div>
    <div class="main" style="
        width: 100%;
        height: 78%;
        background-image: url('src/assets/img/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg');
        background-size: cover;
        background-position: center;
      ">
      <div class="login-item" style="
          width: 400px;
          height: 400px;
          background-color: rgb(246, 241, 252);
          float: right;
          margin-top: 5%;
          margin-right: 10%;
        ">
        <div class="title" style="width: 400px; height: 80px">
          <p style="
              text-align: center;
              line-height: 80px;
              font-weight: bold;
              font-size: 34px;
            ">
            商城登录
          </p>
        </div>
        <div class="login-form" style="width: 400px; height: 300px; /* background-color: red*/">
          <el-form v-model="loginForm">
            <el-form-item v-if="ruleFlag" style="width:400px;height:30px">
              <div
                style="margin-left:50px;color:rgb(255, 147, 76);width:288px;height:30px;border: 1px solid rgb(255, 147, 76);background-color:rgb(254, 242, 242)">
                <div style="float:left">
                  <el-icon style="margin:6px" :size="20">
                    <WarningFilled />
                  </el-icon>
                </div>
                <div style="float:left;font-size:14px;color:grey">
                  <p>{{ ruleMsg }}</p>
                </div>
              </div>
            </el-form-item>
            <el-form-item style="width: 400px; height: 60px">
              <div style="
                  width: 40px;
                  height: 40px;
                  background-color: lightgrey;
                  margin-left: 50px;
                  color:#fff
                ">
                <div style="margin:7px">
                  <el-icon size="25">
                    <User />
                  </el-icon>
                </div>
              </div>
              <div>
                <el-input style="width: 250px; height: 40px" placeholder="账号" v-model="loginForm.username">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item style="width: 400px; height: 60px">
              <div style="
                  width: 40px;
                  height: 40px;
                  background-color: lightgrey;
                  margin-left: 50px;
                  color:#fff
                ">
                <div style="margin:7px">
                  <el-icon size="25">
                    <Lock />
                  </el-icon>
                </div>
              </div>
              <div>
                <el-input type="password" style="width: 250px; height: 40px" placeholder="密码"
                  v-model="loginForm.password" @Keyup.enter="LoginForm"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div style="margin-left:50px;margin-top:10px">
                <el-select v-model="loginForm.role" placeholder="请选择权限">
                  <el-option style="margin-left:10px" label="管理员" value="admin" />
                  <el-option style="margin-left:10px" label="用户" value="user" />
                  <el-option style="margin-left:10px" label="商铺" value="seller" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item>
              <div style="margin-left: 50px; margin-top: 20px">
                <el-button type="primary" style="width: 290px" @click="LoginForm">登录</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <div style="width:300px;margin-left: 50px; margin-top: 20px">
                <div style="width:100px;float: left;">
                  <router-link style="color:rgb(64, 158, 255);text-decoration:none" to="/register">点我注册</router-link>
                </div>
                <div style="width:100px;float: right;text-align:right">
                  <a style="color:rgb(64, 158, 255);text-decoration:none" href="#">忘记密码？</a>
                </div>
              </div>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../api/index"
export default {
  data() {
    return {
      ruleMsg: "",
      ruleFlag: false,
      loginForm: {
        username: "",
        password: "",
        role: "admin"
      }
    }
  },
  methods: {
    LoginForm() {
      if (this.loginForm.username === "") {
        this.ruleFlag = true
        this.ruleMsg = "请输入账号"
      } else if (this.loginForm.password === "") {
        this.ruleFlag = true
        this.ruleMsg = "请输入密码"
      } else {
        login("web", this.loginForm).then(res => {
          if (res.code === 200) {
            if (res.data.role === "user") {
              localStorage.setItem("user", JSON.stringify(res.data));
              this.$store.commit("saveUser",res.data)
              this.$router.push("/mallMain")
            } else {
              localStorage.setItem("user", JSON.stringify(res.data));
              this.$store.commit("saveUser",res.data)
              this.$router.push("/Main")
              this.$message.success(res.message)
            }
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  },

}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>